@import '../var';

.ya-switch {
  box-sizing: border-box;
  font-size: $size-normal;
  border: none;
  padding: calc(0.5em - 2px) 0;
  line-height: 1;
  display: inline-flex;
  flex-direction: row;
  .ya-switch-label {
    padding: 2px 0.5em;
  }
  .ya-switch-block {
    display: inline-block;
    position: relative;
    height: calc(1em + 4px);
    outline: none;
    background-color: $grey-lightest;
    cursor: pointer;
    width: calc(2em + 5px);
    border-radius: calc(0.5em + 2px);
    border: none;
    &:after {
      content: '';
      position: absolute;
      border-radius: 50%;
      top: 2px;
      left: 2px;
      width: 1em;
      height: 1em;
      font-size: inherit;
      background-color: $white;
      transition: all 0.1s ease;
    }
    &.is-active {
      background: $primary;
      &:after {
        left: 100%;
        margin-left: calc(-1em - 2px);
      }
    }
  }
  &.is-small {
    font-size: $size-small;
  }
  &.is-medium {
    font-size: $size-medium;
  }
  &.is-large {
    font-size: $size-large;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    &.is-#{$name} .ya-switch-block.is-active {
      background-color: $color;
    }
  }

  &.has-label-left {
    flex-direction: row-reverse;
  }
}
